<template>
  <div class="attendant">
    <div class="PeopleIn">
      <dl>
        <dt>
          <img v-bind:src="avatar" alt="">
        </dt>
        <dd>
          <p class="name" v-html="name"></p>
          <p class="title" v-html="slogan"></p>
        </dd>
      </dl>
    </div>
    <div class="progress">
      <div class="progressIn"></div>
      <div class="orange" ref="orange" :style="{width: count}"></div>
      <p></p>
    </div>
    <ul>
      <li><p class="p01">目标金额</p><p class="p02" v-html="target"></p></li>
      <li><p class="p01">支持人</p><p class="p02" v-html="person"></p></li>
      <li><p class="p01">已筹金额</p><p class="p02" v-html="paymen"></p></li>
    </ul>
  </div>
</template>

<script>
  export default{
    name: 'attendant',
    props: [
      'name',
      'slogan',
      'avatar',
      'number',
      'target',
      'person',
      'paymen'
    ],
    computed: {
      count () {
        if (this.target > 0 && this.paymen > 0) {
          return Math.floor(this.paymen / this.target * 100) + '%'
        }
        return 0 + '%'
      }
    }
  }
</script>

<style lang="less" scoped>
  @in:30.5rem;
  @border:#e8e8e8;
  @font:#8e8e8e;
  @orange:#f1ae9b;
  .attendant{
    width: 100%;
    height:auto;
    overflow: hidden;
    border-bottom:1px solid @border;
    padding-bottom:0.5rem;
    .PeopleIn{
      height: 4rem;
      overflow: hidden;
      margin:24/2/10rem auto 24/2/10rem;
      padding:0 1.5rem;
      position: relative;
      dl{
        float: left;
        height: auto;
        overflow: hidden;
        dt{
          width: 4rem;
          height: 4rem;
          border-radius: 0.25rem;
          overflow: hidden;
          float: left;
          margin-right:1rem;
          img{
            width: 4rem;
            height: 4rem;
            display: block;
          }
        }
        dd{
          width: 22rem;
          height: 4rem;
          overflow: hidden;
          float: left;
          .name{
            font-size:1.2rem;
            color: #000;

          }
          .title{
            color: @font;
            font-size:22/2/10rem;
            width: 22rem;
            height: 2rem;
            line-height:2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      /*<!--.icon{-->*/
        /*<!--background: url(../assets/images/icon.png) no-repeat;-->*/
        /*<!-- -webkit-background-size:48/2/10rem 42/2/10rem;-->*/
        /*<!--background-size:48/2/10rem 42/2/10rem;-->*/
        /*<!--width: 48/2/10rem;-->*/
        /*<!--height: 42/2/10rem;-->*/
        /*<!--position: absolute;-->*/
        /*<!--right:1.5rem;-->*/
        /*<!--top:50%;-->*/
        /*<!--margin-top:-42/2/10/2rem;-->*/
        /*<!--line-height:42/2/10rem;-->*/
        /*<!--text-align: center;-->*/
        /*<!--color: @orange;-->*/
      /*<!--}-->*/
      /*<!--.liked{-->*/
        /*<!--background: url(../assets/images/liked.png) no-repeat;-->*/
        /*<!-- -webkit-background-size:47/2/10rem 42/2/10rem;-->*/
        /*<!--background-size:47/2/10rem 42/2/10rem;-->*/
      /*<!--}-->*/
    }
    .progress{
      width: @in;
      height: auto;
      overflow: hidden;
      margin:0 auto 1.2rem;
      position: relative;
      .progressIn{
        width: @in;
        height: 5/2/10rem;
        background: #ededed;
        border-radius: 0.5rem;
        position: absolute;
        left:0;
        top:0;
      }
      .orange{
        height: 5/2/10rem;
        background: @orange;
        position: absolute;
        left:0;
        top:0;
      }
      p{
        float: right;
        margin-top:0.25rem;
        color: @orange;
        font-size:0.9rem;
      }
    }
    ul{
      height: auto;
      overflow: hidden;
      padding:0 1.5rem;
      li{
        float: left;
        width: 33.33%;
        font-size:1.2rem;
        text-align: center;
        color: #000;
        p{
          width: 100%;
          text-align: center;
        }
        .p02{
          color: @orange;
        }
      }
    }
  }
</style>
